@import '../../../core/index.less';
@import '../../../core/iconfont.less';

.orin-w-avatarwrapper-root {
    padding: 0;
    margin: 0;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
    &.pc {
        @media (min-width: @max1) {
            display: flex;
        }
        @media (max-width: @max1) {
            display: none;
        }
    }
    &.phone {
        @media (min-width: @max1) {
            display: none;
        }
        @media (max-width: @max1) {
            display: flex;
        }
    }
    .avatar {
        height: 36/@remScale;
        width: 36/@remScale;
        flex: 0 0 36/@remScale;
        user-select: none;
        @media (max-width: @max1) {
            height: 28/@remScale;
            width: 28/@remScale;
            flex: 0 0 28/@remScale;
        }
    }
    .author-name {
        margin-left: 10/@remScale;
        font-size: 16/@remScale;
        &.white {
            color: @white;
            text-shadow: 0 0 6/@remScale #000;
        }
        @media (max-width: @max1) {
            color: @white;
            font-size: 13/@remScale;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow-x: hidden;
            max-width: 80/@remScale;
        }
        @media (max-width: 320px) {
            max-width: 50/@remScale;
        }
    }
    .focus-btn {
        position: absolute;
        top: 50/@remScale;
        width: 100/@remScale;
        height: 38/@remScale;
        line-height: 38/@remScale;
        text-align: center;
        border-radius: 2/@remScale;
        color: @white;
        font-size: 14/@remScale;
        background: rgba(29, 178, 234, 0.8);
        &::after {
            border: 6/@remScale solid transparent;
            border-bottom: 4/@remScale solid rgba(29, 178, 234, 0.8);
            width: 0;
            height: 0;
            position: absolute;
            content: ' ';
            top: -10/@remScale;
            left: 18/@remScale;
        }
        &:hover {
            background: rgba(72, 205, 255, 0.8);
            &:after {
                border-bottom: 4/@remScale solid rgba(72, 205, 255, 0.8);
            }
        }
        &.cancel {
            background: rgba(0, 0, 0, 0.8);
            &::after {
                border-bottom: 4/@remScale solid rgba(0, 0, 0, 0.8);
            }
        }
    }
    @media (max-width: @max1) {
        overflow-x: hidden;
    }
    .focus-btn-phone {
        padding: 6/@remScale 8/@remScale;
        border-radius: 4/@remScale;
        color: @white;
        font-size: 10/@remScale;
        background: @light-blue-color;
        margin: 0 10/@remScale 0 8/@remScale;
        user-select: none;

        @media (min-width: @max1) {
            display: none;
        }
        &.cancel {
            background-color: @black-auxiliary;
        }
        &.margin {
            margin: 0 0 0 8/@remScale;
        }
        .icon {
            margin: 0 3/@remScale 0 0;
            width: 9/@remScale;
            height: 9/@remScale;
        }

    }
    .view-number {
        display: flex;
        align-items: center;
        color: @white;
        font-size: 10/@remScale;
        text-shadow: 0 0 4/@remScale rgba(0, 0, 0, 0.5);
        user-select: none;
        .number {
            margin-left: 4/@remScale;
            text-shadow: 0 0 4/@remScale rgba(0, 0, 0, 0.5);
        }
        @media (min-width: @max1) {
            display: none;
        }
    }
}